import styles from './index.module.scss';
import { Col, Row } from 'antd';
import MainTitle from "@/components/MainTitle"
import TitleWhithLine from "@/components/TitleWhithLine";
import Hexagon from "./hexagon";
import codeUrl from "@/assets/images/home/code.png";

const Together = () => {
	return (
		<div className='container' >
			<Row gutter={100}>
				<Col span={10}>
					<div className={styles.contentBox}>
						<MainTitle title="Together we are" />
						<MainTitle title="#TeamCloudNative" />
						<div className={styles.textBox}>CNCF is deeply committed to the success of our community, from our ambassadors to maintainers to first-time contributors. No matter your goals, we support your cloud native journey.</div>
						<TitleWhithLine title="HUMANS OF CLOUND NATIVE" />
					</div>
				</Col>
				<Col span={14}>
					<div className={styles.rightBox}>
						<Hexagon width={128} height={140} left={190} top={50} />
						<Hexagon width={200} height={218} left={550} top={0} />
						<Hexagon width={164} height={180} left={0} top={160} />
						<Hexagon width={240} height={270} left={230} top={270} />
						<Hexagon width={164} height={180} left={590} top={320} />
					</div>
				</Col>
			</Row>

			<Row gutter={100} style={{ marginTop: "80px" }}>
				<Col span={13}>
					<div className={styles.imgBox}>
						<img src={codeUrl} />
					</div>
				</Col>
				<Col span={11}>
					<div className={styles.contentBox}>
						<MainTitle title="We're redefining how" />
						<MainTitle title="software gets built" />
						<div className={styles.textBox}>We drive team velocity through cross-industry collaboration, contributions, and guidance from experienced practitioners. Whether your background is technical or creative, everybody is welcome to join us in making cloud native ubiquitous.</div>
						<TitleWhithLine title="CONTRIBUTE" />
					</div>
				</Col>
			</Row>
		</div>
	)
}
export default Together;